<template>
  <div class="department">
    <div class="app-table-action-wrap">
      <auth-button
        auth-key="e_2_3"
        class="add-btn"
        icon="el-icon-plus"
        type="primary"
        size="small"
        @click="handleAdd"
      >
        新增
      </auth-button>
    </div>
    <table-paging
      highlight-current-row
      :table-list="tableList"
      :table-column="tableColumn"
      :table-btn-width="110"
      :table-paging="tablePaging"
      :table-total="tableTotal"
      @current-change="handleTableSelected"
      @pagingChange="handlePaginChange"
    />

    <dialog-form
      v-if="dialogVisible"
      width="400px"
      :title="dialogTitle"
      :visible="dialogVisible"
      :before-close="() => (dialogVisible = false)"
      :form-attrs="{formData: modalFormData, renderFormItem, formButtons, labelWidth: '120px', isHideButtons}"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { tableColumn, deptModalFormItem, formButtons } from '../config'
import { TablePaging, DialogForm, AuthButton } from '@/components'
import { fetchDeptFindPage, fetchDeptAdd, fetchDeptGet, fetchDeptDelete, fetchDeptUpdate } from '@/api/basicinfo/system/department'

export default {
  name: 'Department',
  components: { TablePaging, DialogForm, AuthButton },
  props: {
    orgList: {
      type: Array,
      default: () => ([])
    },
    selectedOrgId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      queryFormData: {},
      // 列表配置
      tableList: [], // table数据
      tableColumn: tableColumn('部门名称', this.handleEdit, this.handleDelete), // tableColumn 配置
      tableTotal: 0,
      tablePaging: {
        page: 1,
        pagesize: 10
      },

      dialogVisible: false,
      dialogTitle: '新增',
      modalFormData: {},
      renderFormItem: deptModalFormItem(this.orgList),
      formButtons: formButtons(this.handleModalSubmit, this.hanleClose)
    }
  },
  computed: {
    ...mapGetters(['userOrgId']),
    isHideButtons() {
      return this.userOrgId !== this.selectedOrgId
    }
  },
  watch: {
    orgList() {
      this.renderFormItem = deptModalFormItem(this.orgList)
    }
  },
  methods: {
    handleAdd() { // 添加
      if (!this.selectedOrgId) {
        this.$message.warning('请先选择机构!')
        return false
      }
      if (this.userOrgId !== this.selectedOrgId) {
        this.$message.warning('不允许操作其他机构数据!')
        return false
      }
      this._setModalData()
      this.dialogVisible = true
    },

    handleEdit(id) { // 修改
      this.postGet(id)
    },

    handleDelete(id) { // 删除
      if (this.userOrgId !== this.selectedOrgId) {
        this.$message.warning('不允许操作其他机构数据!')
        return false
      }
      this.postDelete(id)
    },

    handleModalSubmit(values) {
      if (values.id) {
        this.postUpdate(values)
        return false
      }
      this.postAdd(values)
    },

    hanleClose() {
      this.dialogVisible = false
    },

    handlePaginChange(pageInfo) { // 分页改变
      this.tablePaging = pageInfo
      this.postFindPage()
    },

    handleTableSelected(row) { // 表格选中行
      const id = row ? row.id : 0
      this.$bus.$emit('deptTableSelect', id)
    },

    _setModalData(title = '新增', visible = true, modalFormData = { orgId: this.selectedOrgId }) { // 设置弹窗
      this.modalFormData = modalFormData
      this.dialogTitle = title
      this.dialogVisible = visible
    },

    postFindPage() { // 获取列表
      fetchDeptFindPage({ ...this.queryFormData, ...this.tablePaging }).then(res => {
        const { records, current, size, total } = res
        this.tableList = records
        this.tablePaging = {
          page: current,
          pagesize: size
        }
        this.tableTotal = total
      })
    },

    postAdd(values) { // 添加
      fetchDeptAdd(values).then(res => {
        this.dialogVisible = false
        this.$message.success('新增成功')
        this.postFindPage()
      })
    },

    postGet(id) { // 获取详情
      fetchDeptGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },

    postDelete(id) { // 删除
      fetchDeptDelete({ id }).then(() => {
        this.$message.success('删除成功')
        this.postFindPage()
      })
    },

    postUpdate(values) { // 设备更新
      fetchDeptUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.postFindPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.department {
  .title {
    margin-top: 20px;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
  }
}
</style>
